import { createApp } from 'vue'
import ElementPlus from 'element-plus';
// import 'element-plus/lib/theme-chalk/index.css';
import 'element-plus/dist/index.css';
import App from './App.vue';
import router from './router'
import store from "./store"

const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.use(store)
app.mount('#app');


// 下面是注册elementPlus的Icon --就这个鸡儿批事情多
import * as Icons from '@element-plus/icons';
// 注册全局组件
// 全局加载elementPlus Icon
for(const name in Icons){
	/*
	 * 以elIcon为前缀的命名规则，是为了适配已经使用属性名添加图标的内置组件，
	 * 例如：<el-button icon="el-icon-refresh"></el-button>
	 */
	// app.component('elIcon' + name, Icons[name]);

	/**
	 * 这里不使用上面的命名规则，在这直接使用名称方便保存、查看、使用
	 * 上面就直接用<el-button icon="refresh"></el-button>
	 * 解决
	 * https://blog.csdn.net/liu_yanlong/article/details/121284703
	 * https://blog.csdn.net/pdd11997110103/article/details/121440220
	 *
	 * 用图标：
	 * 1.直接用
	 *  <el-icon :size="20">
			<edit />
	    </el-icon>
	   2.动态加载，class要指定
	    <component class="el-icon" :is="menu.icon"></component>
	 */
	app.component(name, Icons[name]);
};